{% if section.settings.collection.id %}
  {% get_collection collections_id={section.settings.collection.id} %}
  {% assign collection = collection  %}
{% endif %}
{% assign data = section.settings %}
{% assign blockId = block_id | default: section.block_id %}

<div class="block_collection_list">
  <div class="container_wrapper">
    {% include 'swiper_title',title: data.block_title,detail: data.block_detail,blockId: blockId %}
    <div class="swiper overflow-hidden" id="swiper-{{blockId}}">
      <ul class="swiper-wrapper">
        {% get_products collection_id={section.settings.collection.id} limit={ section.settings.product_number } %}
        {%- if products.size > 0 -%}
          {% for product in products %}
            <li class="swiper-slide">
              {% include 'collection_product',product:product, collection_handle:collection.handle %}
            </li>
          {% endfor %}
        {%- else -%}
          {%- for i in (1..6) -%}
            <li class="swiper-slide">
              {% include "collection_product" %}
            </li>
          {%- endfor -%}
        {%- endif -%}
      </ul>
    </div>
    {% if section.settings.more != ""%}
      <div class="more_wrapper flex justify-center">
        <a class="secondary_btn" href="/collections/{{ collection.handle }}">{{ section.settings.more }}</a>
      </div>
    {% endif %}
  </div>
</div>


<script>
  (function() {
    let blocksSize = '{{products.size}}' == 0
      ? 6
      : '{{products.size}}';
    let options = {};

    if ((blocksSize > Number(`{{data.pc_number}}`) && $(window).width() >= 768) || (blocksSize > Number(`{{data.yd_number}}`) && $(window).width() < 768)) {
      options.navigation = {
        nextEl: `#swiper-button-next-{{blockId}}`,
        prevEl: `#swiper-button-prev-{{blockId}}`
      }

      $(`#swiper_title_wrapper-{{blockId}} .right`).css('display', 'flex')
    }

    let swiper = new Swiper(`#swiper-{{blockId}}`, {
      slidesPerView: $(window).width() >= 768
        ? '{{data.pc_number}}'
        : '{{data.yd_number}}',
      spaceBetween: 20,
      ... options
    })
  })()
</script>

{% schema %}
{
	"tag": "",
	"class": "block_collection_list",
	"icon": "icon-zhuanjishangpin",
	"is_global": false,
	"name": {
		"zh_CN": "专辑商品",
		"en_US": "Collection"
	},
	"max_blocks": "",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_collection",
			"label": {
				"zh_CN": "选择专辑",
				"en_US": "Select collection"
			},
			"default": {
				"id": "",
				"title": ""
			},
			"id": "collection"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"id": "block_title",
			"default": "New Arrivals"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"id": "block_detail",
			"default": ""
		},
		{
			"type": "card_input_number",
			"label": {
				"zh_CN": "产品总数量",
				"en_US": "Total quantity of products"
			},
			"max": 1000,
			"min": 1,
			"id": "product_number",
			"default": 8
		},
		{
			"type": "card_slider",
			"id": "pc_number",
			"max": "6",
			"min": "3",
			"label": {
				"zh_CN": "PC每排数量",
				"en_US": "PC number per row"
			},
			"default": "3"
		},
		{
			"type": "card_slider",
			"id": "yd_number",
			"max": "2",
			"min": "1",
			"label": {
				"zh_CN": "移动端每排数量",
				"en_US": "Number of mobile terminals per row"
			},
			"default": "2"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "查看更多",
				"en_US": "See more"
			},
			"id": "more",
			"default": "View More"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"collection": {
				"id": "",
				"title": ""
			},
			"block_title": "Featured collection",
			"block_detail": "Share information about your brand with your customers.",
			"product_number": "8",
			"pc_number": "3",
			"yd_number": "2",
			"more": "View all"
		},
		"blocks": []
	}
}
{% endschema %}